<template>
  <div class="swiperPiczoom" v-show="imgsArray && imgsArray.length > 0">
    <!-- <div class="swiper-container gallery-top">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in imgsArray" :key="index"
          :style="{backgroundImage:`url(${item})`}">
          <vue-photo-zoom-pro :url="item" :scale="2" :mask="false" :out-zoomer="false"
            :zoomer-style="{'background-color': 'rgba(0,0,0, 0.6)'}">
          </vue-photo-zoom-pro>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>
    </div> -->
    <vue-photo-zoom-pro :url="activeImg" :scale="2.5" :width="120" :height="120" :mask="false" :out-zoomer="true"
      :zoomer-style="{'background-color': 'rgba(0,0,0, 0.6)'}" />
    <div class="swiper-container gallery-thumbs">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in imgsArray" :key="index"
          :style="{backgroundImage:`url(${item})`}">
          <!-- <pic-zoom :url="item" :scale="3"></pic-zoom> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
export default {
  props: {
    imgs: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      galleryThumbs: null,
      galleryTop: null,
      active: 0,
      imgList: [
        "https://bpic.588ku.com/illus_water_img/18/07/30/f3c7060bc28216271dc8c4630b288331.jpg!/watermark/url/L3dhdGVyL3dhdGVyX2JhY2tfNDAwXzIwMC5wbmc=/repeat/true",
        "https://bpic.588ku.com/illus_water_img/18/08/21/64d2b3b02352b00dd668b705fd8af276.jpg!/watermark/url/L3dhdGVyL3dhdGVyX2JhY2tfNDAwXzIwMC5wbmc=/repeat/true",
        "https://bpic.588ku.com/illus_water_img/18/08/18/472f21d353b64c95b9994be6ed3b7274.jpg!/watermark/url/L3dhdGVyL3dhdGVyX2JhY2tfNDAwXzIwMC5wbmc=/repeat/true"
      ]
    }
  },
  computed: {
    imgsArray() {
      return this.imgs && this.imgs.split(',')
    },
    activeImg() {
      return this.imgsArray && this.imgsArray.length && this.imgsArray[this.active]
    },
  },
  watch: {
    imgsArray(val) {
      this.runSwiper()
    }
  },
  mounted() {
  },
  methods: {
    runSwiper() {
      const that = this;
      this.$nextTick(() => {
        // var galleryTop = new Swiper('.gallery-top', {
        //   nextButton: '.swiper-button-next',
        //   prevButton: '.swiper-button-prev',
        //   spaceBetween: 0,
        // });
        var galleryThumbs = new Swiper('.gallery-thumbs', {
          spaceBetween: 10,
          centeredSlides: true,
          slidesPerView: 'auto',
          touchRatio: 0.2,
          slideToClickedSlide: true,
          onSlideChangeEnd: function (swiper) {
            // alert(swiper.activeIndex) //切换结束时，告诉我现在是第几个slide

            that.active = swiper.activeIndex
          }
        });
        // galleryTop.params.control = galleryThumbs;
        // galleryThumbs.params.control = galleryTop;
      });
    },
  },
};
</script>
<style>
/* 不能固定高度，会使放大位置不准确 */
/* .swiperPiczoom .container .origin-img {
  object-fit: cover;
} */
</style>
<style lang="scss" scoped>
.swiperPiczoom {
  // background-color: #666;
  .photo-zoom-pro {
    width: 430px;
    // height: 430px;
    border: 1px solid #e5e5e5;
    position: relative;
    z-index: 2;
  }
  .swiper-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .swiper-slide {
    background-size: cover;
    background-position: center;
  }
  .gallery-top {
    height: 80%;
    width: 100%;
    border: 1px solid #e5e5e5;
  }
  .gallery-thumbs {
    height: 66px;
    box-sizing: border-box;
    padding: 10px 0;
    .swiper-slide {
      width: 66px;
      height: 100%;
      opacity: 0.4;
      border: 1px solid #e5e5e5;
    }
    .swiper-slide-active {
      opacity: 1;
    }
  }
}
</style>